<template>
  <div>
    <h2>Person组件</h2>
    <h4>Count组件得到的求和为</h4>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addRandom">随机添加from Web</button>
    <ul>
      <li v-for="person in personList" :key="person.id">{{ person.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: 'Person',
  data() {
    return {
      name: '',
    }
  },
  computed: {
    personList() {
      return this.$store.state.personAbout.personList
    },
    sum() {
      return this.$store.state.countAbout.sum
    },
  },
  created() {},
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name }
      console.log(personObj)
      this.$store.commit('personAbout/ADD_PERSON', personObj)
      this.name = ''
    },
    addRandom() {
      this.$store.dispatch('personAbout/addPersonServe')
    },
  },
}
</script>

<style scoped></style>
